<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // ES5的类： 构造函数 

        // function Person(name,age){
        //     this.name = name;
        //     this.age = age;
        // }

        // Person.prototype.walk = function(){
        //     console.log("走");
        // }

        // let zhangsan = new Person("张三",20);

        // zhangsan.walk();



        // ES6的类  
        // 类的定义；
        // class Person{
        //     constructor(name,age){
        //         this.name = name;
        //         this.age = age;
        //     }
        //     walk(){
        //         console.log("走");
        //     }
        // }

        // // console.log(typeof Person);
        // // 调用
        // let zhangsan = new Person("张三",20);
        // zhangsan.walk();
        // console.log(zhangsan);

        // let obj = {
        //     fn:function(){

        //     },
        //     fn1(){

        //     }
        // }

        // 1.ES6的语法；
        // 2.ES6的类本质上是函数 ；ES6的类是一种语法糖；
        // 3.ES6类里的函数 自动放在原型上；
        // 4.如果类没有属性那么 constructor 可以省略；
            // class Person{
            //     walk(){
            //         console.log("走")
            //     }
            // }

            // let zhangsan = new Person();
            // zhangsan.walk();
        // 5.属性的多种定义方式 
        // class Person{
        //     age = 20;
        //     constructor(name){
        //         this.name = name;
        //         // this.age = 20;
        //     }
        //     walk(){
        //         console.log("走");
        //     }
        // }

        // let zhangsan = new Person("张三");
        // console.log(zhangsan);

        // 6.属性的get和set定义方式；
        class Person{
            constructor(name){
                this.name = name;
                
            }
            // 获取属性的时候会触发get函数，且属性的值是get函数的返还值；
            get age(){
                console.log("get");
                return 20;
            }
            set age(newValue){
                // set 会在设置属性的时候触发 set函数；
                console.log("set",newValue);
            }
        }
        let zhangsan = new Person("张三");
    //     console.log(zhangsan);
    //   let res =   zhangsan.age   // 获取age属性；
    //   console.log(res);
        zhangsan.age = 30;  //set 操作 设置操作；


        /* 
        // 1.ES6的语法；
        // 2.ES6的类本质上是函数 ；ES6的类是一种语法糖；
        // 3.ES6类里的函数 自动放在原型上；
        // 4.如果类没有属性那么 constructor 可以省略；
           5.属性的多种定义方式 
           6.属性的get和set定义方式；
        
        */
    //    把tab选项卡 构造函数改成 ES6中的类；
    </script>
</body>
</html>